<template>
<div class="header flex" :style="{backgroundColor: bgcolor}">
  <!-- logo -->
  <div class="header-logo">
    <img :src="siteConfig.full_logo|| 'static/images/home/logo-(1)@2x.png'" alt="" style="height: 36px;">
  </div>
  <!-- 菜单 -->
  <div class="header-menu flex">

    <div class="header-menu-item hand" v-for="(item, index) in showMenu" :key="index" @click.stop="jumpModule(item)">
      <span :class="{'border-menu': true, 'active': activeName == item.menu_id}">{{item.name}}</span>
      <div class="child-product" v-if="item.functions && item.functions.length > 0">
        <div class="child-product-item" v-for="(child, ix) in item.functions" :key="ix" @click.stop="jumpModule(child)">{{child.name}}</div>
      </div>
    </div>

  </div>
  <!-- 注册登录 -->
  <div class="header-login jc-between">
    
    <div class="login-in hand" v-if="userInfo && userInfo.user_id">
      <img :src="userInfo.avatar" alt="" />
      <span class="omit tac">{{userInfo.nickname}}</span>
      <i class="el-icon-caret-bottom fc-w3"></i>

      <div class="login-hid">
        <div class="login-hid-item hand tac" v-for="(child, ix) in loginArr" :key="ix" @click.stop="jumpUser(child)">{{child.name}}</div>
      </div>
    </div>
    <div class="login-not" v-else>
      <i class="iconfont icon-denglu"></i>
      <span @click="login" class="hand">登录</span>
      <span class="pie"> / </span>
      <span @click="signup" class="hand">注册</span>
    </div>
    <div v-if="isShowEng">
      <span class="hand" @click.stop="jumpCn(1)">中文</span>
      <span class="pie"> / </span>
      <span class="hand" @click.stop="jumpCn(2)">English</span>
    </div>
    
  </div>
</div>
</template>

<script>
// 个人中心 $globalconfig.URLS.USER + '#/'
// 我的作品 $globalconfig.URLS.USER + '#/panorama-manage'
// 账号管理 $globalconfig.URLS.USER + '#/user/personal-info'
// 我的消息 $globalconfig.URLS.USER + '#/message/personal'

import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      baseUrl: $globalconfig.URLS.API,
      userUrl: $globalconfig.URLS.USER,
      isShowEng: $globalconfig.IS_SHOW_CHANGE_COLOR,
      activeName: 1000,
      menuConfig: $globalconfig.MENU_CONFIG,
      // navs: [
      //   {title: '首页', name: 'home',},
      //   {
      //     title: '产品',
      //     name: 'product',
      //     children: $globalconfig.HEADER_NAVS,
      //   },
      //   {title: '作品市场', name: 'panomarket',},
      //   {title: '作者', name: 'author',},
      //   {title: '新闻资讯', name: 'news',},
      //   {title: '关于我们', name: 'about',},
      // ],
      loginArr: [
        {name: '工作台', path: '#/', id: 0,},
        {name: '我的作品', path: '#/products/panorama/panorama-manage', id: 0,},
        {name: '账号管理', path: '#/user/personal-info', id: 0,},
        {name: '我的消息', path: '#/message/personal', id: 0,},
        {name: '退出登录', id: 1,},
      ],
    }
  },
  props: {
    bgcolor: {
      type: String,
      default: 'rgba(0,0,0,0)',
    }
  },
  watch: {
    '$route.name': {
      handler(val) {
        // console.log(val)
        if (val == 'panomarketDetail') {
          this.activeName = 3000
        } else if (val == 'authorDetail') {
          this.activeName = 4000
        } else if (val == 'newsDetail') {
          this.activeName = 5000
        } else {
          let arr = this.menuConfig.filter(item => item.path === val)
          if (arr && arr.length > 0) {
            this.activeName = arr[0].id
          }
        }
      },
      immediate: true,
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'siteMenu', 'siteConfig']),
    showMenu () {
      if (this.siteMenu && this.siteMenu.length > 0) {
        return this.siteMenu
      }
      return []
    },
  },
  methods: {
    jumpCn(val) {
      if (val === 1) {
        window.location.href = window.location.origin
      } else if (val === 2) {
        window.location.href = window.$globalconfig.ENGLISH_URL
      }
    },
    // 登录
    login() {
      let url = window.location.href
      window.open(`${$globalconfig.URLS.API}user/login?redirect_uri=${encodeURIComponent(url)}`, '_self')
      // this.$router.push({name: 'login'})
    },
    // 注册
    signup() {
      let url = window.location.href
      window.open(`${$globalconfig.URLS.API}user/register?redirect_uri=${encodeURIComponent(url)}`, '_self')
      // this.$router.push({name: 'signup'})
    },
    // 父级跳转
    jumpModule(item) {
      // console.log(item)
      if (item.menu_url) {
        window.open(item.menu_url, '_self')
      } else {
        let arr = this.menuConfig.filter(menu => menu.id === item.menu_id)
        if (arr && arr.length > 0) {
          // console.log(arr)
          if (arr[0].query) {
            this.$router.push({name: arr[0].path, query: arr[0].query})
          } else {
            this.$router.push({name: arr[0].path})
          }
        }
      }
    },
    // 子级跳转
    jumpProduct(item) {
      // console.log(item)
      this.$router.push({
        name: item.path,
        query: {t: item.name}
      })
    },
    // 用户跳转
    jumpUser(item) {
      // console.log(item)
      if (item.id === 0) {
        window.open(this.userUrl + item.path, '_self')
      } else if (item.id === 1) {
        this.exit()
      }
    },
    // 退出登录
    exit() {
      this.$cookie.set('UserAccount', null, { expires: -1, domain: $globalconfig.DOMAIN })
      this.$cookie.set('UserAccount', null, { expires: -1 })
      this.$cookie.set('userinfo', null, { expires: -1, domain: $globalconfig.DOMAIN })
      this.$cookie.set('userinfo', null, { expires: -1 })
      this.$cookie.set('access_token', null, { expires: -1, domain: $globalconfig.DOMAIN })
      this.$cookie.set('access_token', null, { expires: -1 })
      // 清除用户信息
      this.$store.dispatch('clearUserInfo')
      // 跳转到首页
      this.$router.push({name: 'home'})
    },
    
  },
  // created() {
  //   this.$store.dispatch('getUserInfo')
  // }
}
</script>

<style lang="stylus" scoped>
// .header-wai
//   width 100%
//   height 120px
//   background linear-gradient(0deg, #000000 0%, rgba(255, 255, 255, 0) 100%)
//   opacity 0.7
//   position absolute
//   top 0
//   left 0
.header
  width 100%
  min-width 1200px
  height 52px
  position fixed
  top 0
  left 0
  z-index 10
  justify-content space-between
  background-color rgba(0,0,0,0)
  .header-logo
    width 150px
    padding-top 8px
    padding-left 30px
  .header-menu
    width calc(100% - 400px)
    height 100%
    justify-content center
    .header-menu-item
      width auto
      height 100%
      position relative
      padding 0 15px
      font-size 15px
      line-height 52px
      text-align center
      color #ffffff
      
      .child-product
        position absolute
        top 52px
        left -30px
        width 120px
        z-index 3
        background-color #252525
        padding-top 11px
        padding-bottom 11px
        display none
        .child-product-item
          width 100%
          height 45px
          line-height 45px
          text-align center
          font-size 15px
          font-family PingFang SC
          font-weight 400
          color #E5E5E5
          opacity 0.6
          &:hover
            color #ffffff
            opacity 1
      .border-menu
        width 100%
        height 40px
        display block
        &:hover
          border-bottom 1px solid #ffffff
        &.active
          border-bottom 1px solid #ffffff
      &:hover
        .child-product
          display block
          transition all 2s
        
  .header-login
    width 250px
    padding-right 10px
    line-height 52px
    color #ffffff
    
    .login-not
      i
        margin-right 5px
      span
        font-size 14px
        font-family PingFang SC
        font-weight 400
        color #ffffff
        line-height: 35px
      // .pie
      //   margin 0 13.5px
    .login-in
      position relative
      img
        width 40px
        height 40px
        border-radius 50%
        overflow hidden
      span
        display inline-block
        width 85px
        font-size 15px
        vertical-align bottom
        color #fff
      .login-hid
        position absolute
        top 52px
        right 0
        z-index 3
        background-color #252525
        width 150px
        padding-top 11px
        padding-bottom 11px
        display none
        .login-hid-item
          width 100%
          height 45px
          line-height 45px
          text-align center
          font-size 15px
          font-family PingFang SC
          font-weight 400
          color #E5E5E5
          opacity 0.6
          &:hover
            color #ffffff
            opacity 1
      &:hover
        >.login-hid
          display block
          transition all 2s
</style>
